<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	
	<title>Anything Zoomer | Image</title>

	<link rel="stylesheet" href="demo/style.css">
	<link rel="stylesheet" href="css/anythingzoomer.css">

	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script src="js/jquery.anythingzoomer.js"></script>
	<script>
	$(function() {

		$(".zoom").anythingZoomer();

		$('.president')
		.bind('click', function(){
			return false;
		})


	});
	</script>
</head>
<body id="image">

<div id="main-content">

	<h1>AnythingZoomer</h1>

	<a href="https://github.com/Mottie/AnythingZoomer/downloads" id="dl">Download</a>

	<ul id="nav">
		<li class="cal"><a href="index.html">Calendar Demo</a></li>
		<li class="img"><a href="image.html">Image Demo</a></li>
		<li class="txt"><a href="text.html">Text Demo</a></li>
		<li class="dbl"><a href="double.html">Double Demo</a></li>
		<li class="use"><a href="use.html">Usage</a></li>
	</ul>

	<h2>Image Demo</h2>

	<p>Mouse over to see zoomed in version, double click to toggle between large and small versions.</p>

	<p>Target 
		<a href="#" class="president" rel="82,50">George Washington</a>,
		<a href="#" class="president" rel="105,58">Thomas Jefferson</a>,
		<a href="#" class="president" rel="123,72">Theodore Roosevelt</a> or
		<a href="#" class="president" rel="148,72">Abraham Lincoln</a>
	</p>

	<hr>

	<div class="zoom">

		<div class="small">
			<img src="demo/rushmore_small.jpg" alt="small rushmore">
		</div>

		<div class="large">
			<img src="demo/rushmore_small.jpg" alt="big rushmore">
		</div>

	</div>

</div>

</body>

</html>